<template>
    <div style="width: 100%; margin-bottom: 30px" :style="{height: max_height +'px'}">
        <div ref="chart" class="chart"></div>
    </div>
</template>

<script>

import * as echarts from 'echarts'
import debounce from 'lodash/debounce';
import {heightConfig3, set_option_Pie} from "@/utils/loadPage";

export default {
    name: "PieChart",
    data() {
        return {
            max_height: heightConfig3(),
            // 遮罩层
            loading: false,
            // 创建防抖函数
            debouncedSetOption: debounce(this.set_option, 50),
            cards: [],
            itemData: null,
            form: {
                title: '长者人数分布',
                title_center:'center', // 标题位置
                encode_value: 'value',
                encode_name: 'areaName',
                sort_field: 'value',
                x_name: '街道/镇',
                y_name: '长者/人',
                y_suffix: '人',
                dataList: []
            },
        };
    },
    mounted() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        // 处理窗口大小变化事件
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option();
        },


        set_option() {
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart)
            console.log(this.form)
            let option = set_option_Pie(this, this.form)
            this.myChart.setOption(option)
        },

        /** 查询数据**/
        get_data() {
            this.form.dataList = [];
            let dataList = [
                {areaName: '岳阳街道'},
                {areaName: '永丰街道'},
                {areaName: '方松街道'},
                {areaName: '中山街道'},
                {areaName: '广富林街道'},
                {areaName: '九里亭街道'},
                {areaName: '泗泾镇'},
                {areaName: '佘山镇'},
                {areaName: '车墩镇'},
                {areaName: '新桥镇'},
                {areaName: '洞泾镇'},
                {areaName: '九亭镇'},
                {areaName: '泖港镇'},
                {areaName: '石湖荡镇'},
                {areaName: '新浜镇'},
                {areaName: '叶榭镇'},
                {areaName: '小昆山镇'},
            ]
            for (let i = 0; i < dataList.length; i++) {
                let count = Math.floor(Math.random() * 100 + 10); // 生成 10 到 100 之间的随机总数
                this.form.dataList.push({areaName: dataList[i].areaName, value: count});
            }
        },
    }
};
</script>


<style scoped lang="scss">
.chart {
    width: 99%;
    height: 99%;
    overflow: auto
}
</style>
